
const chartDom = document.getElementById('main-chart-1');
const myChart = echarts.init(chartDom);
var categories = ['“三有”企业', '民营企业500强', '互联网企业100强', '专精特新小巨人企业', '上市企业', '独角兽企', '高新技术企业', '科技型中小企业'];
var singleData = [50, 60, 50, 40, 55, 25, 65, 33];
var unitedData = [12, 18, 28, 55, 15, 14, 14, 52];
var totalData = singleData.map((v, i) => v + unitedData[i]);
var fontSize_big = 14;
var fontSize_small = 10;
var barWidth_out = 20;
var barWidth_in = 18;
var barWidth_num = 15;


option = {
    title: {
        text: '覆盖率(%)',
        left: '0%',
        top: '6.5%', // 根据需要微调
        textStyle: {
            color: '#05C4FB',
            fontSize: fontSize_big
        }
    },

    legend: {
        top: '5%',
        right: '8%',
        textStyle: {
            color: '#ffffff',
            fontSize: fontSize_small
        },
        itemWidth: barWidth_in,
        itemHeight: 15,
        data: ['联建覆盖的企业数', '单建的企业数']
    },
    backgroundColor: 'rgba(14,33,71,0)',
    grid: {
        left: '5%',
        right: '2%',
        bottom: '8%',
        top: '20%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        data: categories,
        axisTick: { show: false },
        axisLine: { show: false },

        axisLabel: {
            interval: 0, // 强制全部显示
            textStyle: {
                color: '#05C4FB',
                fontSize: fontSize_big
            },
            formatter: function(value) {
                return value.length > 4 ? value.slice(0, 4) + '\n' + value.slice(4) : value;
            },
        },
    }, {
        // 辅助外框
        type: 'category',
        axisTick: { show: false },
        axisLine: { show: false },
        axisLabel: { show: false },
        data: new Array(categories.length).fill(99.7),
    }, {
        name: '',
        nameGap: barWidth_in,
        nameTextStyle: {
            color: '#05C4FB',
            fontSize: fontSize_big
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(0,0,0,0)'
            }
        },
        axisTick: { show: false },
        axisLabel: { show: false },
        data: []
    }],
    yAxis: [{
        type: 'value',
        name: '',
        nameTextStyle: {
            color: '#05C4FB',
            fontSize: fontSize_big,
            padding: [0, 20, 0, 0]
        },
        nameLocation: 'center',
        nameRotate: 90,
        nameGap: 45,
        splitLine: { show: false },
        axisTick: { show: false },
        axisLine: { show: false },
        axisLabel: {
            textStyle: {
                color: '#05C4FB',
                fontSize: fontSize_big
            }
        }
    }],

    series: [ // 联建（底部）
        {
            name: '联建覆盖的企业数',
            type: 'bar',
            stack: '数据',
            barWidth: barWidth_num,
            barGap: '-100%',
            data: unitedData,
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0, y: 0, x2: 0, y2: 1,
                    colorStops: [
                        { offset: 0, color: '#29C3ED' },
                        { offset: 1, color: 'rgba(14,33,71,0)' }
                    ]
                },
            },
            label: {
                show: false,
                position: 'insideBottom',
                color: '#fff',
                fontSize: fontSize_small,
                formatter: '{c}'
            },
            xAxisIndex: 0,
            z: 2
        },
        // 单建（顶部）
        {
            name: '单建的企业数',
            type: 'bar',
            stack: '数据',
            barWidth: barWidth_num,
            barGap: '-100%',
            data: singleData,
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0, y: 0, x2: 0, y2: 1,
                    colorStops: [
                        { offset: 0, color: '#28FFA6' },
                        { offset: 1, color: 'rgba(14,33,71,0)' }
                    ]
                }
            },
            label: {
                show: false,
                position: 'top',
                color: '#fff',
                fontSize: fontSize_small,
                formatter: function (params) {
                    return totalData[params.dataIndex];
                }
            },
            xAxisIndex: 0,
            z: 3
        },  {
            name: '内框',
            type: 'bar',
            xAxisIndex: 1,
            barGap: '-100%',
            data: new Array(categories.length).fill(99.7),
            barWidth: barWidth_in,
            itemStyle: {
                normal: {
                    color: '#010919',
                    barBorderRadius: [4, 4, 0, 0]
                }
            },

            z: 1
        }, {
            name: '外框',
            type: 'bar',
            xAxisIndex: 2,
            barGap: '-100%',
            data: new Array(categories.length).fill(100),
            barWidth: barWidth_out,
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0, y: 0, x2: 0, y2: 1,
                    colorStops: [
                        { offset: 0, color: '#109AE9' },
                        { offset: 1, color: '#0e2147' }
                    ],
                    barBorderRadius: 2
                },
                barBorderRadius: 2
            },

            z: 0
        }
    ]
};

function myChartPieResize() {
    myChart.resize();
}

myChart.setOption(option);
